<style>
    .count-block {
        display: flex;
        margin-top: 20px;
    }
    .layui-anim-upbit {
        height: 400px;
        overflow-y: auto !important;
        min-height: 400px !important;
    }
</style>

<div class="layui-card-body">
    <div class="layui-row layui-col-space15 layui-form-pane layui-form" lay-filter="search_form">
        <div class="layui-col-md12 layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择仓库</label>
                    <div class="layui-input-block">
                        <select name="warehouse_id" class="layui-select">
                            <option value="">请选择</option>
                            {foreach $warehouse_list as $key => $item}
                            <option value="{$key}">{$item}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">寄往国家</label>
                <div class="layui-input-block">
                    <select name="to_country_id" class="layui-select" lay-search lay-filter="select_country">
                        <option value="">请选择</option>
                        {foreach $country_list as $key => $item}
                        <option value="{$key}">{$item}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">目的仓库</label>
                <div class="layui-input-block">
                    <select id="to_warehouse_id" name="to_warehouse_id" class="layui-select" lay-search>
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <input type="text" name="trans_no" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md4">
                <button class="layui-btn layui-btn-normal" id="createTransNo">生成/查询集运单号</button>
            </div>
        </div>
    </div>

    <hr>

    <div class="layui-row layui-col-space15 layui-form-pane layui-form" lay-filter="package_form" style="margin-top: 40px;">
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">添加包裹</label>
                <div class="layui-input-block">
                    <input type="text" name="package_no" value="" class="layui-input" placeholder="请输入国际快递单号">
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <button class="layui-btn layui-btn-normal" style="margin-right: 50px;" id="search_package_btn">搜索</button>
            <button class="layui-btn layui-btn-normal" style="margin-right: 20px;" id="print_label">打印标签</button>
            <button class="layui-btn layui-btn-normal" id="pack_btn">打包</button>
        </div>
    </div>

    <div class="count-block">
        <!--<div class="count-item">
            <span>总重量：</span>
            <span>0</span>
        </div>-->
        <div class="count-item" style="margin-left: 30px;">
            <span>包裹数量：</span>
            <span id="package_num">0</span>
        </div>
    </div>
    <table class="layui-table" id="goods_list" lay-filter="goods_list"></table>
</div>

<script>
    $(function() {
        let table = layui.table;
        let form = layui.form;
        table.render({
            elem: '#goods_list',
            even: true,
            height: '500',
            url: '{:url("getTransPackageList")}',
            cols: [[
                // {checkbox: true, fixed: true},
                {field: 'warehouse_name', title: '{:lang("仓库")}', minWidth: 150, align: 'center'},
                // {field: 'platform_name', title: '{:lang("平台")}', minWidth: 150, align: 'center' , hide:!account_show},
                {field: 'account_name', title: '{:lang("公司")}', minWidth: 150, align: 'center'},
                {field: 'order_no', title: '{:lang("订单号")}', minWidth: 150, align: 'center'},
                {field: 'express_company', title: '{:lang("物流公司")}', minWidth: 100, align: 'center'},
                {field: 'express_no', title: '{:lang("运单号码")}', minWidth: 150, align: 'center'},
                {field: 'weight', title: '{:lang("重量")}', minWidth: 90, align: 'center'},
                {field: 'length', title: '{:lang("长(cm)")}', minWidth: 90, align: 'center'},
                {field: 'width', title: '{:lang("宽(cm)")}', minWidth: 90, align: 'center'},
                {field: 'height', title: '{:lang("高(cm)")}', minWidth: 90, align: 'center'},
                {field: 'location_code', title: '{:lang("货位")}', align: 'center', minWidth: 100},
                {field: 'status_name', title: '{:lang("状态")}', align: 'center', minWidth: 100},
                {field: 'into_time', title: '{:lang("入库时间")}', align: 'center', minWidth: 150},
            ]],
            done: function(res, curr, count, origin) {
                $('#package_num').text(count);
            }
        });

        // 选择国家
        form.on('select(select_country)', function(obj) {
            // 获取海外仓列表
            let value = obj.value;
            httpRequest('{:url("getWarehouseAbroadList")}', {country_id: value}, 'get', function(msg, res) {
                let html = '<option value="">请选择</option>';
                for (let i in res) {
                    html += '<option value="'+i+'">'+res[i]+'</option>';
                }
                $('#to_warehouse_id').html(html);
                form.render();
            })
        });

        // 生成集运单号
        $('#createTransNo').on('click', function() {
            let data = form.val('search_form');
            if(!isNotEmpty(data.trans_no)) { // 创建需要验证填写信息
                if(!isNotEmpty(data.warehouse_id)) {
                    layer.msg('{:lang("请选择仓库")}', {icon: 2});
                    return false;
                }
                if(!isNotEmpty(data.to_country_id)) {
                    layer.msg('{:lang("请选择寄往国家")}', {icon: 2});
                    return false;
                }
                if(!isNotEmpty(data.to_warehouse_id)) {
                    layer.msg('{:lang("请选择目的仓库")}', {icon: 2});
                    return false;
                }
            }
            httpRequest('{:url("createTransNo")}', data, 'post', function(msg, res) {
                // 生成成功
                layer.msg(msg, {icon: 1});
                // 赋值渲染
                if(isNotEmpty(data.trans_no)) { // 搜索集运单时
                    let html = '<option value="">请选择</option>';
                    for (let i in res.warehouse_abroad_list) {
                        html += '<option value="'+i+'">'+res.warehouse_abroad_list[i]+'</option>';
                    }
                    $('#to_warehouse_id').html(html);

                    form.val('search_form', {
                        to_country_id: res.trans_info.to_country_id,
                        to_warehouse_id: res.trans_info.to_warehouse_id,
                        warehouse_id: res.trans_info.warehouse_id
                    });
                    // 更新表格
                    table.reload('goods_list', {
                        where: {trans_no: data.trans_no}
                    });

                } else { // 生成新的
                    if(isNotEmpty(res.trans_no)) {
                        form.val('search_form', {
                            trans_no: res.trans_no
                        });
                    }
                }
                form.render();
            })
        })

        // 添加包裹
        $('#search_package_btn').on('click', function() {
            let data = form.val('package_form');
            let trans_data = form.val('search_form');
            if(!isNotEmpty(trans_data.trans_no)) {
                layer.msg('{:lang("集运单号不能为空")}', {icon: 2});
                return false;
            }
            if(!isNotEmpty(data.package_no)) {
                return false;
            }
            httpRequest('{:url("searchPackageNo")}', {package_no: data.package_no, trans_no: trans_data.trans_no}, 'get', function(msg, res) {
                layer.msg(msg, {icon: 1});
                // 更新表格
                table.reload('goods_list', {
                    where: {trans_no: trans_data.trans_no}
                });
            })
        });

        // 打印标签
        $('#print_label').on('click', function() {
            let data = form.val('search_form');
            layer.prompt({title: '请输入标签备注,(50字以内)', formType: 2}, function(text, index){
                let count = text.length;
                if(count > 50) {
                    layer.msg('{:lang("必须50字以内")}', {icon: 2});
                    return false;
                }
                let json_data = {"panels":[{"index":0,"height":60,"width":100,"paperHeader":-64.5,"paperFooter":170.07874015748033,"printElements":[{"options":{"left":21,"top":19.5,"height":123,"width":232.5},"printElementType":{"type":"rect"}},{"options":{"left":31.5,"top":25.5,"height":28.5,"width":211.5,"field":"trans_no","testData":"1123","textType":"barcode"},"printElementType":{"type":"text"}},{"options":{"left":21,"top":64.5,"height":9,"width":232.5},"printElementType":{"type":"hline"}},{"options":{"left":31.5,"top":67.5,"height":24,"width":210,"field":"auto_name","testData":"自定义编码","fontFamily":"Microsoft YaHei","fontWeight":"bold"},"printElementType":{"type":"text"}},{"options":{"left":21,"top":94.5,"height":9,"width":232.5},"printElementType":{"type":"hline"}},{"options":{"left":31.5,"top":100.5,"height":12,"width":81,"title":"QUANTITY(pcs)","field":"number","fontFamily":"Microsoft YaHei","fontSize":9,"fontWeight":"bold"},"printElementType":{"type":"text"}},{"options":{"left":115.5,"top":100.5,"height":12,"width":126,"field":"package_num","testData":"2","fontFamily":"Microsoft YaHei","fontSize":9},"printElementType":{"type":"text"}},{"options":{"left":21,"top":118.5,"height":9,"width":231},"printElementType":{"type":"hline"}},{"options":{"left":31.5,"top":124.5,"height":12,"width":81,"title":"WEIGHT(KG)","fontFamily":"Microsoft YaHei","fontSize":9,"fontWeight":"bold"},"printElementType":{"type":"text"}},{"options":{"left":115.5,"top":124.5,"height":12,"width":126,"field":"weight","testData":"20.20","fontFamily":"Microsoft YaHei","fontSize":9},"printElementType":{"type":"text"}}],"paperNumberLeft":253,"paperNumberTop":148,"paperNumberDisabled":true}]};

                httpRequest('{:url("printLabel")}', {trans_no: data.trans_no, auto_name: text}, 'post', function(msg, res) {
                    layer.close(index);
                    //初始化打印插件
                    hiprint.init();
                    // 实例化并打印
                    var hiprintTemplate = new hiprint.PrintTemplate({ template: json_data});
                    hiprintTemplate.print(res);
                })
            });
        });

        // 打包
        $('#pack_btn').on('click', function() {
            let data = form.val('search_form');

            layer.confirm('{:lang("确认打包该集运单吗")}', {
                btn: ['{:lang("确定")}', '{:lang("关闭")}'] //按钮
            }, function(){
                httpRequest('{:url("packTrans")}', {trans_no: data.trans_no}, 'post', function(msg, res) {
                    layer.msg(msg, {icon: 1});
                    setTimeout(function() {
                        location.reload();
                    }, 1000)
                })
            });
        })
    })
</script>
